<template>
  <div class="check-dashboard-container">
    <!-- 顶部标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <el-icon class="header-icon" :size="32"><DataBoard /></el-icon>
        <div class="header-text">
          <h1>盘点驾驶舱</h1>
          <p>实时监控库存盘点全局数据</p>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="handleRefresh" :loading="refreshing">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button type="primary" @click="handleFullscreen">
          <el-icon><FullScreen /></el-icon>
          全屏显示
        </el-button>
      </div>
    </div>

    <!-- 核心KPI卡片 -->
    <div class="kpi-grid">
      <el-card shadow="hover" class="kpi-card kpi-primary">
        <div class="kpi-container">
          <div class="kpi-icon">
            <el-icon :size="50"><DocumentChecked /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">本月盘点任务</div>
            <div class="kpi-value">{{ kpiData.monthlyTasks }}</div>
            <div class="kpi-trend up">
              <el-icon><CaretTop /></el-icon>
              <span>+{{ kpiData.taskGrowth }}%</span>
              <span class="trend-label">环比上月</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card kpi-success">
        <div class="kpi-container">
          <div class="kpi-icon">
            <el-icon :size="50"><CircleCheck /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">完成率</div>
            <div class="kpi-value">{{ kpiData.completionRate }}%</div>
            <div class="kpi-trend up">
              <el-icon><CaretTop /></el-icon>
              <span>+{{ kpiData.rateGrowth }}%</span>
              <span class="trend-label">环比上月</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card kpi-warning">
        <div class="kpi-container">
          <div class="kpi-icon">
            <el-icon :size="50"><TrendCharts /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">准确率</div>
            <div class="kpi-value">{{ kpiData.accuracyRate }}%</div>
            <div class="kpi-trend down">
              <el-icon><CaretBottom /></el-icon>
              <span>-{{ kpiData.accuracyDrop }}%</span>
              <span class="trend-label">环比上月</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card kpi-danger">
        <div class="kpi-container">
          <div class="kpi-icon">
            <el-icon :size="50"><Coin /></el-icon>
          </div>
          <div class="kpi-content">
            <div class="kpi-label">盈亏金额</div>
            <div class="kpi-value profit">+¥{{ kpiData.profitLoss }}</div>
            <div class="kpi-detail">
              盈：+¥{{ kpiData.profit }} | 亏：-¥{{ kpiData.loss }}
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 进行中的任务 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="never" class="section-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><Loading /></el-icon>
              <span>进行中的任务</span>
              <el-badge :value="ongoingTasks.length" type="primary" />
            </div>
            <el-link type="primary" @click="$router.push('/inventory/check-tasks')">
              查看全部 <el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
          
          <el-table :data="ongoingTasks" stripe>
            <el-table-column prop="taskNo" label="任务单号" width="180">
              <template #default="{ row }">
                <el-link type="primary">{{ row.taskNo }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="taskName" label="任务名称" min-width="200" />
            <el-table-column prop="warehouseName" label="仓库" width="120" />
            <el-table-column prop="responsiblePerson" label="负责人" width="100" />
            <el-table-column label="进度" width="200">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" :status="row.progress === 100 ? 'success' : ''" />
              </template>
            </el-table-column>
            <el-table-column prop="dueDate" label="截止时间" width="180">
              <template #default="{ row }">
                <span :class="{ 'overdue': isOverdue(row.dueDate) }">
                  {{ row.dueDate }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <el-empty v-if="ongoingTasks.length === 0" description="暂无进行中的任务" :image-size="100" />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="never" class="section-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><Warning /></el-icon>
              <span>异常预警</span>
              <el-badge :value="warnings.length" type="danger" />
            </div>
          </div>

          <el-timeline class="warning-timeline">
            <el-timeline-item
              v-for="warning in warnings"
              :key="warning.id"
              :timestamp="warning.time"
              type="danger"
              placement="top"
            >
              <div class="warning-item">
                <div class="warning-header">
                  <el-tag type="danger" size="small">{{ warning.type }}</el-tag>
                  <el-tag size="small">{{ warning.warehouseName }}</el-tag>
                </div>
                <div class="warning-content">{{ warning.message }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>

          <el-empty v-if="warnings.length === 0" description="暂无异常预警" :image-size="80" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据分析 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="never" class="section-card chart-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><TrendCharts /></el-icon>
              <span>盘点任务趋势（近6个月）</span>
            </div>
            <el-radio-group v-model="trendType" size="small">
              <el-radio-button label="count">任务数</el-radio-button>
              <el-radio-button label="rate">完成率</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon :size="60" color="#dcdfe6"><TrendCharts /></el-icon>
              <p>折线图：盘点任务趋势分析</p>
              <el-tag type="info">图表组件待集成</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never" class="section-card chart-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><PieChart /></el-icon>
              <span>盘点类型分布</span>
            </div>
          </div>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon :size="60" color="#dcdfe6"><PieChart /></el-icon>
              <p>饼图：全盘/抽盘/循环/动态</p>
              <el-tag type="info">图表组件待集成</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 效率与质量 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="never" class="section-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><Trophy /></el-icon>
              <span>本月效率TOP5</span>
            </div>
          </div>
          <div class="ranking-list">
            <div 
              v-for="(item, index) in efficiencyTop5" 
              :key="index"
              class="ranking-item"
            >
              <div class="ranking-badge" :class="`rank-${index + 1}`">
                {{ index + 1 }}
              </div>
              <div class="ranking-info">
                <div class="ranking-name">{{ item.person }}</div>
                <div class="ranking-desc">完成{{ item.count }}个任务</div>
              </div>
              <div class="ranking-value">
                <div class="value-main">{{ item.avgTime }}</div>
                <div class="value-sub">平均耗时</div>
              </div>
              <div class="ranking-score">
                <el-progress 
                  type="circle" 
                  :percentage="item.score" 
                  :width="60"
                  :stroke-width="6"
                />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never" class="section-card">
          <div class="card-header">
            <div class="card-title">
              <el-icon><WarningFilled /></el-icon>
              <span>高损耗商品TOP5</span>
            </div>
          </div>
          <div class="ranking-list">
            <div 
              v-for="(item, index) in lossTop5" 
              :key="index"
              class="ranking-item loss-item"
            >
              <div class="ranking-badge rank-loss">
                {{ index + 1 }}
              </div>
              <div class="ranking-info">
                <div class="ranking-name">{{ item.productName }}</div>
                <div class="ranking-desc">{{ item.category }}</div>
              </div>
              <div class="ranking-value">
                <div class="value-main loss-value">{{ item.lossQty }}</div>
                <div class="value-sub">盘亏数量</div>
              </div>
              <div class="ranking-score">
                <div class="loss-amount">
                  ¥{{ item.lossAmount.toFixed(0) }}
                </div>
                <div class="loss-rate">{{ item.lossRate }}%</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-card shadow="never" class="quick-actions-card" style="margin-top: 20px;">
      <div class="card-header">
        <div class="card-title">
          <el-icon><Lightning /></el-icon>
          <span>快捷操作</span>
        </div>
      </div>
      <div class="quick-actions">
        <el-button type="primary" size="large" @click="$router.push('/inventory/check-tasks')">
          <el-icon><Plus /></el-icon>
          新建盘点任务
        </el-button>
        <el-button size="large" @click="$router.push('/inventory/check-sheets')">
          <el-icon><Document /></el-icon>
          查看盘点单
        </el-button>
        <el-button size="large" @click="$router.push('/inventory/profit-loss')">
          <el-icon><DataAnalysis /></el-icon>
          盈亏分析
        </el-button>
        <el-button size="large" @click="$router.push('/inventory/check-statistics')">
          <el-icon><TrendCharts /></el-icon>
          盘点统计
        </el-button>
        <el-button size="large" @click="$router.push('/inventory/check-history')">
          <el-icon><Clock /></el-icon>
          历史记录
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  DataBoard, Refresh, FullScreen, DocumentChecked, CircleCheck,
  TrendCharts, Coin, CaretTop, CaretBottom, Loading, ArrowRight,
  Warning, PieChart, Trophy, WarningFilled, Lightning, Plus,
  Document, DataAnalysis, Clock
} from '@element-plus/icons-vue'

const router = useRouter()

// 状态
const refreshing = ref(false)
const trendType = ref('count')

// KPI数据
const kpiData = reactive({
  monthlyTasks: 28,
  taskGrowth: 12,
  completionRate: 89.3,
  rateGrowth: 5.2,
  accuracyRate: 95.6,
  accuracyDrop: 1.8,
  profitLoss: '26.5K',
  profit: '125K',
  loss: '98.5K'
})

// 进行中的任务
const ongoingTasks = ref([
  {
    taskNo: 'CHK202401150001',
    taskName: '2024年1月全盘任务',
    warehouseName: '主仓库',
    responsiblePerson: '张三',
    progress: 65,
    dueDate: '2024-01-17 18:00'
  },
  {
    taskNo: 'CHK202401160002',
    taskName: '高价值商品抽盘',
    warehouseName: '主仓库',
    responsiblePerson: '李四',
    progress: 40,
    dueDate: '2024-01-18 17:00'
  },
  {
    taskNo: 'CHK202401140003',
    taskName: '分仓A定期盘点',
    warehouseName: '分仓A',
    responsiblePerson: '王五',
    progress: 85,
    dueDate: '2024-01-16 18:00'
  }
])

// 异常预警
const warnings = ref([
  {
    id: 1,
    type: '大额盘亏',
    warehouseName: '主仓库',
    time: '2024-01-15 14:30',
    message: 'iPhone 15 Pro Max 盘亏金额超过¥50000，需人工审核'
  },
  {
    id: 2,
    type: '任务逾期',
    warehouseName: '分仓B',
    time: '2024-01-15 12:00',
    message: '盘点任务 CHK202401100004 已逾期2天未完成'
  },
  {
    id: 3,
    type: '准确率低',
    warehouseName: '主仓库',
    time: '2024-01-15 10:00',
    message: '盘点员小李本月准确率仅78%，低于标准值'
  }
])

// 效率TOP5
const efficiencyTop5 = ref([
  { person: '张三', count: 15, avgTime: '2.3小时', score: 98 },
  { person: '李四', count: 12, avgTime: '2.8小时', score: 96 },
  { person: '王五', count: 10, avgTime: '3.1小时', score: 94 },
  { person: '赵六', count: 8, avgTime: '3.5小时', score: 92 },
  { person: '钱七', count: 6, avgTime: '4.2小时', score: 90 }
])

// 损耗TOP5
const lossTop5 = ref([
  { productName: 'iPhone 15 Pro Max', category: '手机', lossQty: -45, lossAmount: -449955, lossRate: 4.5 },
  { productName: 'MacBook Pro 14寸', category: '笔记本', lossQty: -20, lossAmount: -299980, lossRate: 4.0 },
  { productName: 'iPad Pro 12.9寸', category: '平板', lossQty: -30, lossAmount: -239970, lossRate: 3.8 },
  { productName: 'Apple Watch Ultra 2', category: '手表', lossQty: -15, lossAmount: -89985, lossRate: 3.5 },
  { productName: 'AirPods Max', category: '耳机', lossQty: -18, lossAmount: -80982, lossRate: 3.2 }
])

// 方法
const handleRefresh = () => {
  refreshing.value = true
  setTimeout(() => {
    refreshing.value = false
    ElMessage.success('数据已刷新')
  }, 1000)
}

const handleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    ElMessage.success('已进入全屏模式')
  } else {
    document.exitFullscreen()
    ElMessage.info('已退出全屏模式')
  }
}

const isOverdue = (dateStr) => {
  return new Date(dateStr) < new Date()
}
</script>

<style scoped>
.check-dashboard-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h1 {
  margin: 0;
  font-size: 28px;
  color: #303133;
  font-weight: 600;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.kpi-card {
  border-left: 4px solid;
  transition: all 0.3s;
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.kpi-card.kpi-primary {
  border-left-color: #409EFF;
}

.kpi-card.kpi-success {
  border-left-color: #67C23A;
}

.kpi-card.kpi-warning {
  border-left-color: #E6A23C;
}

.kpi-card.kpi-danger {
  border-left-color: #F56C6C;
}

.kpi-container {
  display: flex;
  gap: 20px;
}

.kpi-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-radius: 12px;
  color: #409EFF;
  flex-shrink: 0;
}

.kpi-content {
  flex: 1;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1;
}

.kpi-value.profit {
  color: #67C23A;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

.kpi-trend.up {
  color: #67C23A;
}

.kpi-trend.down {
  color: #F56C6C;
}

.trend-label {
  color: #909399;
  font-weight: 400;
  margin-left: 4px;
}

.kpi-detail {
  font-size: 13px;
  color: #606266;
  margin-top: 4px;
}

.section-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.warning-timeline {
  max-height: 400px;
  overflow-y: auto;
}

.warning-item {
  padding: 8px;
}

.warning-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.warning-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.chart-card :deep(.el-card__body) {
  padding: 20px;
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 8px;
}

.chart-placeholder p {
  margin: 16px 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.ranking-item:hover {
  background: #e6f7ff;
  transform: translateX(4px);
}

.ranking-badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}

.ranking-badge.rank-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.ranking-badge.rank-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
}

.ranking-badge.rank-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
}

.ranking-badge.rank-4,
.ranking-badge.rank-5 {
  background: linear-gradient(135deg, #909399 0%, #606266 100%);
}

.ranking-badge.rank-loss {
  background: linear-gradient(135deg, #F56C6C 0%, #E6A23C 100%);
}

.ranking-info {
  flex: 1;
}

.ranking-name {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.ranking-desc {
  font-size: 13px;
  color: #909399;
}

.ranking-value {
  text-align: right;
  margin-right: 16px;
}

.value-main {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 4px;
}

.value-main.loss-value {
  color: #F56C6C;
}

.value-sub {
  font-size: 12px;
  color: #909399;
}

.ranking-score {
  flex-shrink: 0;
}

.loss-amount {
  font-size: 16px;
  font-weight: 600;
  color: #F56C6C;
  text-align: right;
  margin-bottom: 4px;
}

.loss-rate {
  font-size: 13px;
  color: #909399;
  text-align: right;
}

.quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.overdue {
  color: #F56C6C;
  font-weight: 500;
}

@media (max-width: 1400px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}
</style>

